﻿@using ZhouYu.DreamTour.Model;
@using ZhouYu.DreamTour.Web.Models;
@{
    var UserInfo = UserInfoContext.userInfoContext.UserInfo;
    //存储样式Class名
    var className = new string[3];
    className[0] = "economy";
    className[1] = "premiumeconomy";
    className[2] = "business";
    //创建一个随机数对象
    Random random = new Random();

    //接收银行卡集合
    var Bank = ViewBag.Bank as List<User_Bank>;
}
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>中国梦想游-会员登录页</title>
    @*<link href="~/css/Tween.css" rel="stylesheet" type="text/css" />*@
    <link href="~/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/css/common.css" rel="stylesheet" type="text/css" />
    @*<link href="~/layui-v2.5.4/layui/css/layui.css" rel="stylesheet" type="text/css" />
        <link href="~/layui-v2.5.4/layui/css/modules/layer/default/layer.css" rel="stylesheet" type="text/css" />*@
    <link href="~/css/button.css" rel="stylesheet" type="text/css" />
    @*<script type="text/javascript" src="~/layui-v2.5.4/layui/layui.js"></script>
        <script type="text/javascript" src="~/layui-v2.5.4/layui/lay/modules/layer.js"></script>*@
    <script type="text/javascript" src="~/js/Format.js"></script>
    <style>
        .tariffCards {
            /*position: absolute;
            top: 50%;
            left: 50%;*/
            padding-bottom: 10%;
            margin-top: 20%;
            margin-left: 30%;
            user-select: none;
            transform: translate3d(0, 0, 0);
            transform-style: preserve-3d;
        }

            .tariffCards:after {
                position: absolute;
                bottom: -27px;
                left: 5%;
                content: "";
                width: 65%;
                height: 10px;
                border-radius: 100%;
                background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
            }

            .tariffCards > div {
                position: relative;
                width: 280px;
                height: 140px;
                border-radius: 12px;
                color: white;
                transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
                transition: all 0.4s ease;
                overflow: hidden;
                cursor: pointer;
            }

                .tariffCards > div:after {
                    position: absolute;
                    top: -70px;
                    left: 0;
                    content: "";
                    width: 200%;
                    height: 200%;
                    background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
                    transform: translateX(-100%);
                }

                .tariffCards > div img {
                    margin-top: 15px;
                    pointer-events: none;
                }

                .tariffCards > div h3 {
                    position: absolute;
                    bottom: 28px;
                    left: 15px;
                    font-size: 18px;
                    font-weight: 800;
                }

                .tariffCards > div span {
                    position: absolute;
                    font-weight: 700;
                    bottom: 15px;
                    left: 15px;
                    font-size: 12px;
                    font-weight: 600;
                    opacity: 0.8;
                }

                .tariffCards > div.economy {
                    margin-top: -70px;
                    z-index: 3;
                    background-color: #8063E1;
                    background-image: linear-gradient(135deg, #BD7BE8, #8063E1);
                    box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063E1;
                }

                .tariffCards > div.premiumeconomy {
                    margin-top: -70px;
                    z-index: 2;
                    background-color: #3F58E3;
                    background-image: linear-gradient(135deg, #7F94FC, #3F58E3);
                    box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3F58E3;
                }

                .tariffCards > div.business {
                    margin-top: -70px;
                    z-index: 1;
                    background-color: #2C6FD1;
                    background-image: linear-gradient(135deg, #21BBFE, #2C6FD1);
                    box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2C6FD1;
                }

                .tariffCards > div.first {
                    margin-top: -70px;
                    background-color: #352F64;
                    background-image: linear-gradient(135deg, #415197, #352F64);
                    box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.1), 1px 1px 0px 1px #352F64;
                }

                .tariffCards > div:hover {
                    transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
                }

                    .tariffCards > div:hover:after {
                        transform: translateX(100%);
                        transition: all 1.2s ease-in-out;
                    }

        /*a {
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: #0077FF;
            font-size: 14px;
            font-weight: 700;
        }*/
    </style>
</head>
<body>
    <div class="top_hw clearfix">
        <div class="top_h clearfix" style="width:100%">
            <div class="top_hl" style="margin-left:7%">
                <span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：
                <b>0571-63322269</b>
            </div>
            <div class="top_hr" style="margin-right:7%">
                @if (UserInfo == null)
                {
                    <a href="/Home/User_Register">会员注册</a>
                    <span>|</span>
                    <a href="/Home/User_Login">登录</a>
                    <span>|</span>
                    <a href="#">梦想收藏</a>
                    <span>|</span>
                    <a href="#">设为首页</a>
                    @*<a>
                            欢迎你，来到新世界旅行网！
                        </a>*@
                }
                else
                {
                    <a href="/Home/User_Center">会员中心</a>
                    <span>|</span>
                    <a href="#">梦想收藏</a>
                    <span>|</span>
                    <a href="#">设为首页</a>
                    <span>|</span>
                    <a href="/Login/LoginOut">退出</a>
                    <span>|</span>
                    <a>
                        欢迎你，<span>@UserInfo.User_Name</span>来到新世界旅行网！
                    </a>
                }
            </div>
        </div>
    </div>
    <div class="head_w">
        <div class="head_t clearfix">
            <div class="logo">
                <img src="~/images/logo.jpg">
            </div>
            <div class="rx_line">
                <img src="~/images/rx.jpg">
            </div>
        </div>
    </div>
    <div class="mainNav clearfix">
        <ul class="Nav_ul">
            <li>
                <a href="/Home/Index">首页</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Route">旅游路线</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Scenic">旅游景点</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/CateringAccommodation">餐饮住宿</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Traffic_DatailsOne">交通线路</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Group">旅游团购</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Specialty">地方特产</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/AutoGenerationIntro">自动生成简介</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Team_Join">团队简介</a>
                <img src="~/images/nav_line.jpg">
            </li>
            <li>
                <a href="/Home/Itinerary_Details">行程导航</a>
            </li>
        </ul>
    </div>
    <div class="b_wrap">
        <div class="current">
            <span>当前所在地：</span>
            <a href="/Home/Index">首页</a> >>
            <a href="/Home/User_Center">会员中心</a>
        </div>
        <div class="fmember">
            <div class="fmleft">
                <div class="fmleft_top">
                    <img src="~/images/fmbt1.png" border="0">
                </div>
                <div class="fmlist">
                    <ul>
                        <li class="f1">订单中心</li>
                        <li>
                            >>
                            <a href="/Home/User_Order">我的订单</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_Colleague">发布结伴同行</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_Apply">我申请的结伴同行</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_Comment">我的点评</a>
                        </li>
                        <li class="f2">
                            >>
                            <a href="/Home/User_Questions">我的提问</a>
                        </li>
                    </ul>
                    <ul>
                        <li class="f1">我的优惠卡券</li>
                        <li>
                            >>
                            <a href="/Home/User_CashAccount">现金账号</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_AllowanceVol">抵用券</a>
                        </li>
                        <li class="f2">
                            >>
                            <a href="/Home/User_TouristVol">旅游券</a>
                        </li>
                    </ul>
                    <ul>
                        <li class="f1">账户信息</li>
                        <li>
                            >>
                            <a href="/Home/User_Data">个人资料</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_AccountSecurity">账户安全</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_Bank">我的银行卡</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_Integral">我的积分</a>
                        </li>
                        <li>
                            >>
                            <a href="/Home/User_UpdatePwd">修改密码</a>
                        </li>
                        <li class="f2">
                            >>
                            <a href="/Home/User_Address">配送地址</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fmright" style="width:30%;margin-right:42%">
                <div class="fmr1" style="border:none">
                    <div class="fmr1_top">< 银行卡</div>
                    <div class="fmr1_m">
                        <!--银行卡样式-->
                        <div class="tariffCards">
                            @for (int i = 0; i < Bank.Count; i++)
                            {
                                int classNum = random.Next(0, 2);
                                <div class="@className[classNum]">
                                    <img src="@Bank[i].Bank_Logo" alt="Economy" height="74">
                                    <h3>@Bank[i].Bank_Name</h3>
                                    <span>@Bank[i].Bank_Num</span>
                                </div>
                            }
                            <div id="AddBank" class="first">
                                <h3>+ 添加银行卡</h3>
                                <span>点击进行添加</span>
                            </div>
                            <div id="DelBank" class="first">
                                <h3>-  解绑银行卡</h3>
                                <span>点击进行解绑</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="~/js/jquery-1.9.1.min.js"></script>
<script>
    $("#AddBank").click(function () {
        window.location.href = "/Home/BindBank";
    });

    $("#DelBank").click(function () {
        window.location.href = "/Home/DelBank";
    });
</script>
</html>

